<template>
  <headerNav></headerNav>
  <div class="college-box">
    <!-- 分类栏 -->
    <ScreenOut :arrs="sumarr" @activadd="activadd"></ScreenOut>
    <div class="dh-1">
      <div class="you-1">
        <div class="wei-1 xis">
          <div
            class="qb-1 xis"
            @click="quadd"
            :style="{
              background: flag ? '#0f63ed' : '#ffffff',
              color: flag ? '#ffffff' : '#696e76'
            }"
          >
            全部
          </div>
          <div
            class="ai-1 xis"
            @click="aiadd"
            :style="{
              background: flag ? '#ffffff' : '#0f63ed',
              color: flag ? '#696e76' : '#ffffff'
            }"
          >
            AI课程
          </div>
        </div>
      </div>
      <div class="search bg-fff">
        <el-input
          v-model="objs.searchCourse"
          placeholder="搜索相关课程"
        ></el-input>
        <img
          @click="suoadd"
          class="icon-size-16 icon-search"
          src="@/assets/images/ic_search.png"
        />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="kapin-1">
      <CardIdex
        v-for="(item, index) in arr"
        :key="index"
        :items="item"
        @kpadd="kpadd"
      ></CardIdex>
    </div>
  </div>
  <!-- 分页 -->
  <div class="pagination-box">
    <el-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total,prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import CardIdex from './components/CardIdex.vue'
import {
  getSubjectDetail,
  getGradeList,
  getCourseList,
  getGradeLisst
} from '@/services/Application'
import type { ComponentSize } from 'element-plus'
import ScreenOut from './components/ScreenOut.vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const currentPage3 = ref(1)
const pageSize3 = ref(12)
const background = ref(false)
const disabled = ref(false)
const total = ref(0)
const size = ref<ComponentSize>('default')
const flag = ref(true)

const objs: any = ref({
  deptCode: '', //年级
  kckm: '', //科目
  kccc: '', //册次

  isAicourse: '',
  searchCourse: '',
  pageNum: 1,
  pageSize: 12
})
const arr: any = ref([])
const njarr: any = ref([
  {
    label: '全部',
    value: ''
  }
]) //年级

const kmarr: any = ref([
  {
    label: '全部',
    value: ''
  }
]) //课目

const ccarr: any = ref([
  {
    label: '全部',
    value: ''
  }
]) //册次
const sumarr: any = ref([])
const getnjarr = async () => {
  const res = await getGradeList()
  res.data.map((item: any) => {
    njarr.value.push({
      label: item.dictLabel,
      value: item.dictValue
    })
  })
}
const getkmarr = async () => {
  const res = await getCourseList()
  res.data.map((item: any) => {
    kmarr.value.push({
      label: item.dictLabel,
      value: item.dictValue
    })
  })
}

const getccarr = async () => {
  const res = await getGradeLisst()
  res.data.map((item: any) => {
    ccarr.value.push({
      label: item.dictLabel,
      value: item.dictValue
    })
  })
}
const getsumarr = () => {
  sumarr.value = [
    { name: '年级', collegeList: njarr.value, activeIndex: 0 },
    { name: '学科', collegeList: kmarr.value, activeIndex: 0 },
    { name: '册次', collegeList: ccarr.value, activeIndex: 0 }
  ]
}

const activadd = (index: any, val: any, indexs: number) => {
  sumarr.value[index].activeIndex = indexs
  if (index == 0) {
    objs.value.deptCode = val.value
  } else if (index == 1) {
    objs.value.kckm = val.value
  } else {
    objs.value.kccc = val.value
  }
  getlist()
}
//列表
const getlist = async () => {
  const res = await getSubjectDetail(objs.value)
  arr.value = res.rows
  total.value = res.total
}

const quadd = () => {
  flag.value = true
  objs.value.isAicourse = ''
  getlist()
}

const aiadd = () => {
  flag.value = false
  objs.value.isAicourse = '1'
  getlist()
}
const kpadd = (item: any) => {
  const route = router.resolve({
    path: '/courseDetails',
    query: {
      id: item.kch,
      xn: item.xn,
      xq: item.xq,
      ghs: item.ghs,
      bh: item.bh
      // title: item.title
    }
  }) // 解析路由路径
  window.open(route.href, '_blank') // 在新窗口打开
}
const suoadd = () => {
  getlist()
}
//年级过滤条件
const jsarr = ['', '1001', '1002', '1003']
//判断高亮联合
const getacvit = () => {
  const index = jsarr.findIndex((item) => item == route.query.id)
  sumarr.value[0].activeIndex = index
  getlist()
}
onMounted(async () => {
  objs.value.searchCourse = route.query.searchCourse || ''
  objs.value.deptCode = route.query.id || ''
  await Promise.all([getnjarr(), getkmarr(), getccarr()])
  // 整合数据
  getsumarr()
  getlist()
  if (route.query.id) getacvit()
})

const handleCurrentChange = (val: number) => {
  objs.value.pageNum = val
  getlist()
}
const handleSizeChange = (val: number) => {
  objs.value.pageSize = val
  getlist()
}
</script>

<style lang="scss" scoped>
.college-box {
  margin: 0 300px;
  padding: 45px 0 30px 0;
}
.pagination-box {
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
}
.kapin-1 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(312px, 1fr));
  gap: 20px;
}

.dh-1 {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.z-1 {
  width: 320px;
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
}
.se-1 {
  width: 6px;
  height: 24px;
  margin-right: 12px;
  background: #0f63ed;
}
.t-1 {
  font-size: 20px;
  color: #18191a;
}
.you-1 {
  width: 220px;
  margin-right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wei-1 {
  width: 108px;
  height: 24px;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 17px;
  justify-content: center;
  border: 1px solid #e6ebf0;
}
.qb-1 {
  width: 44px;
  height: 20px;
}
.ai-1 {
  width: 56px;
  height: 20px;
}
.qb-1,
.ai-1 {
  transition:
    background 0.3s ease,
    color 0.3s ease; /* 添加过渡效果 */
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  color: #696e76;
  border-radius: 17px;
  background: #ffffff;
}
.chak-1 {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #2f3133;
}
.im-g {
  width: 16px;
  height: 16px;
  margin-left: 4px;
}
.search {
  width: 320px;
  height: 32px;
  border-radius: 2px;
  position: relative;
  .icon-search {
    position: absolute;
    right: 12px;
    bottom: 8px;
    cursor: pointer;
  }
}
</style>
